<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="内容详情"></uni-navbar></view>

		<view class="detail-info" v-if="speechInfo.id">
			<view class="info-title">
				<view class="title-top">{{ speechInfo.title }}</view>
				<view class="title-btm">
					<text class="btm-name">{{ sysUser ? sysUser.userName : '' }}</text>
					<text class="btm-time">{{ speechInfo.createTime | parseTime('{y}-{m}-{d}') }}</text>
				</view>
			</view>
			<view class="info-detail">
				<view class="info-h2">正文内容</view>
				<view class="overflow"><uni-parse :content="speechInfo.content"></uni-parse></view>
			</view>
			<view class="info-detail" v-if="speechApprove.length > 0">
				<view class="info-h2">反馈详情</view>
				<u-row gutter="16">
					<u-col span="4"><view class="info-ttl">时间</view></u-col>
					<u-col span="5"><view class="info-ttl">审阅意见</view></u-col>
					<u-col span="3"><view class="info-ttl">审阅人</view></u-col>
				</u-row>

				<u-row class="info-row" gutter="16" v-for="(item, index) in speechApprove" :key="item.id">
					<u-col span="4">
						<view>{{ item.reviewerTime | parseTime('{y}-{m}-{d}') }}</view>
					</u-col>
					<u-col span="5">
						<view>{{ item.reviewerComments ? item.reviewerComments : '无' }}</view>
					</u-col>
					<u-col span="3">
						<view>{{ item.reviewer ? item.reviewer : '无' }}</view>
					</u-col>
				</u-row>
			</view>
		</view>

		<view class="uploader-add" @click="onTts">
			<image v-if="!play" src="/static/img/icon_76.png" mode="widthFix"></image>
			<image src="/static/img/icon_77.gif" v-else mode="widthFix"></image>
		</view>

		<view class="form-box" v-if="$sysBtns('hyfy_top_apprpve')">
			<u-form-item class="form-item" label=" " label-position="top">
				<u-input v-model="form.reviewerComments" type="textarea" placeholder="请输入审阅意见" :clearable="false" :height="160" :maxlength="-1" />
			</u-form-item>

			<view class="fiexd-btm">
				<view class="flex-box">
					<u-button class="form-btn" type="primary" @click="confirm(1)">反馈</u-button>
					<u-button class="form-btn" type="success" @click="confirm(2)">已阅</u-button>
				</view>
			</view>
		</view>

		<view class="fiexd-btm" v-if="$sysBtns('hyfy_top_edit')">
			<view class="flex-box"><u-button class="form-btn" type="primary" @click="editTo()">修改</u-button></view>
		</view>

		<view class="file-list" v-if="fileList.length > 0">
			<view>附件:</view>
			<view class="file-item" v-for="(item, index) in fileList" :key="index" @click="$showLine(item)">
				<view class="file-name clamp">{{ item.name }}</view>
				<view class="right-type">预览</view>
			</view>
		</view>

		<view class="form-box form-box-show">
			<u-form ref="uForm">
				<u-form-item class="form-item" label="届次">{{ speechInfo.jieName + speechInfo.ciName }}</u-form-item>
				<u-form-item class="form-item" label="发言类型">{{ speechInfo.typeName }}</u-form-item>
				<u-form-item class="form-item" label="发言分类">{{ speechInfo.classificationName }}</u-form-item>
				<u-form-item class="form-item" label="会议类型">{{ speechInfo.conferenceTypeName }}</u-form-item>
				<u-form-item class="form-item" label="推荐单位">{{ speechInfo.recommendedByName }}</u-form-item>
				<u-form-item class="form-item" label="提交时间">{{ speechInfo.submitTime | parseTime('{y}-{m}-{d}') }}</u-form-item>
			</u-form>
		</view>
	</view>
</template>

<script>
import uniParse from '@/components/uni-parse/parse.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniParse
	},
	data() {
		return {
			statusMap: {
				0: '所有',
				1: '已阅',
				2: '反馈',
				3: '未审阅'
			},
			typeList: {},
			conferenceTypeList: {},
			classificationList: {},
			id: '',
			status: '',
			list: '',
			form: {
				reviewerComments: ''
			},
			detailInfo: {},
			speechInfo: {},
			speechApprove: [],
			fileList: [],
			sysUser: '',
			play: false
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.id = option.id;
		if (option.status) {
			this.status = option.status;
		}
		this.loadData();
	},
	onHide() {
		this.$ttsOff();
	},
	onUnload() {
		this.$ttsOff();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
			} else {
				this.$logout();
			}
		},
		loadData() {
			this.$request('/huiyifayan/conference-speech/detail', {
				id: this.id
			}).then((res) => {
				this.fileList = res.data.fileList;
				this.speechInfo = res.data.conferenceSpeech;
				this.sysUser = res.data.bySysUserId;
				this.speechApprove = res.data.approvelist;
			});
		},
		editTo() {
			uni.navigateTo({
				url: '/pagesB/speech/add?type=spare&id=' + this.id
			});
		},
		confirm(e) {
			let data = {};
			this.form.conferenceSpeechId = this.id;
			this.form.reviewer = this.userId;
			this.form.status = e.toString();

			data = {
				conferenceSpeechApprove: this.form
			};

			this.$request('/huiyifayan/conference-speech-approve/review', data, {
				load: true
			}).then((res) => {
				this.$msg(res.msg);
				setTimeout(() => {
					let pre = this.$prePage();
					if (pre && pre.loadData) {
						pre.loadData('refresh');
					}
					uni.navigateBack();
				}, 500);
			});
		},
		downLoad(item) {
			const downloadTask = uni.downloadFile({
				url: config.def().baseUrl + 'file/download/' + item.id,
				success: (res) => {
					if (res.statusCode == 200) {
					}
					uni.saveFile({
						tempFilePath: res.tempFilePath,
						success: function (red) {}
					});
				}
			});

			downloadTask.onProgressUpdate((res) => {});
		},
		onTts() {
			let text = this.speechInfo.title;
			text += this.sysUser ? this.sysUser.userName : '';
			text += ',' + this.$parseTime(this.speechInfo.createTime, '{y}-{m}-{d}');
			text += ',' + this.$htmlRegx(this.speechInfo.content);
			this.$tts(text, this, 500);
		},
		previewImage(idx, images) {
			uni.previewImage({
				current: idx,
				urls: images
			});
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.form-box {
	border-top: 10rpx solid $u-border-color;

	.form-item {
		@include mp-flex;
	}
}

.info-row {
	border-top: 1rpx solid $u-border-color;
}

.info-ttl {
	color: #9b9b9b;
}

.fiexd-btm {
	position: static;
	border-top: 10rpx solid $u-border-color;
	padding: 30rpx;
}
</style>
